<template>
    <section style="padding-top: .3rem;background: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: auto" class="deal_list">

      <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" style="background: #fff;">

        <div class="deal_red" slot="list" v-for="item,key in list" :key="key" @click="sureBtn(item)">
        <!--<div class="red_left"></div>-->
          <!--<img src="../../assets/mine/ye_line.png" v-if="item.name == '银行卡一要素查询' || item.name == '银行卡二要素验证' || item.name == '银行卡三要素验证' || item.name == '银行卡四要素验证' || item.name == '运价查询' || item.name == '货车司机验证' || item.name == '物流园查询'" class="hot_line">-->
          <!--<img src="../../assets/mine/blue_line.png" v-if="item.name == '身份证二要素验证' || item.name == '身份证二要素验证带返照'"  class="hot_line">-->
          <!--<img src="../../assets/hot/recharge_line.png" v-if="item.name == '69充98元' || item.name == '99充198元' || item.name == '198充398元' || item.name == '399充798元'" class="hot_line">-->
          <!--<img src="../../assets/mine/green_line.png" v-if="item.name == '运营商二要素验证' || item.name == '运营商三要素验证'|| item.name == '手机在网状态查询'||item.name == '手机入网时长查询'" class="hot_line">-->
          <!--<img src="../../assets/mine/pink_line.png" v-if="item.name == '网络借贷黑名单验证' || item.name == '网贷逾期记录查询' || item.name == '网络借贷记录查询' || item.name == '个人涉法涉诉统计'" class="hot_line">-->
        <div class="red_center">
          <img :src="item.iconurl" class="deal_img">
          <div class="deal_tex">
            <p class="deal_title">
              <span>{{item.desc}}</span>
              <span v-if="item.amount>0" style="color:#06d85f;">{{item.amount}}</span>
              <span v-else style="color: red;">{{item.amount}}</span>
            </p>
            <p class="deal_time">
              <span>{{item.createTime}}</span>
              <span>余额：{{item.balance}}</span>
            </p>
          </div>
        </div>
        <div class="red_right" >
          查看
        </div>
      </div>
        <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">数据加载完毕</span>


      </yd-infinitescroll>
    </section>
</template>

<script>
    export default {
        name: "dealDetail",
        data(){
          return{
            page: 2,
            pageSize: 10,
            list:[],
            top:0,
          }
        },
      methods:{
        sureBtn(item){
          let id = item.id;
          sessionStorage.setItem('setId',id);
          this.$router.push('/deal_info');
        },
        loadList() {
          const that = this;
          this.$ajax.post(window.g.apiUrl+'/account/getRecord.do', JSON.stringify({
            startTime:'',
            endTime:'',
            pageNum:that.page,
          })).then(function (response) {
            // const _list = response.body;
            for(let i=0;i<response.data.data.length;i++){
              that.list.push(response.data.data[i])
              if(response.data.data[i].desc.indexOf('|') >= 0){
                if(response.data.data[i].outTradeNo.substr(0,1) == 'C'){
                  response.data.data[i].desc = response.data.data[i].desc.substr(0,response.data.data[i].desc.indexOf('|'))
                }else{
                  response.data.data[i].desc = response.data.data[i].desc.substr(response.data.data[i].desc.indexOf('|')+1)
                }
              }
            }
            if (response.data.data.length < that.pageSize) {
              /* 所有数据加载完毕 */
              that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
              return;
            }
            /* 单次请求数据完毕 */
            that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

            that.page++;
          });
        }
      },
      created(){

          const that = this;

        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '登录失效，正在跳转至登录页面',
                timeout: 1500,
                callback:()=>{
                  that.$router.push('/login');
                }
              });
            }else{
              that.$dialog.loading.open('正在加载');
              setTimeout(()=>{
                that.$ajax.post(window.g.apiUrl+'/account/getRecord.do',JSON.stringify({
                  startTime:'',
                  endTime:'',
                  pageNum:1,
                })).then((response)=>{
                  that.$dialog.loading.close();
                  if(response.data.code == 200){
                    that.list = response.data.data;
                    response.data.data.forEach((val,oldVal)=>{
                      if(val.desc.indexOf('|') >= 0){
                        if(val.outTradeNo.substr(0,1) == 'C'){
                          val.desc = val.desc.substr(0,val.desc.indexOf('|'))
                        }else{
                          val.desc = val.desc.substr(val.desc.indexOf('|')+1)
                        }
                      }
                    })
                  }else{
                    that.$dialog.notify({
                      mes: '信息获取超时，请稍后重试',
                      timeout: 1500,
                    });
                  }
                }).catch(()=>{
                })
              },100)
            }
          }).catch(()=>{
        })


      },
      activated(){
        document.getElementsByClassName('deal_list')[0].scrollTop = this.top;
      },
      deactivated(){
        this.top = document.getElementsByClassName('deal_list')[0].scrollTop;
      },
    }
</script>

<style scoped>
  .deal_red{
    height: 1.8rem;
    box-shadow: 1px 3px 3px rgba(0,0,0,.2),0px -.1px 0px rgba(0,0,0,.2);
    margin: 0rem .3rem .3rem .3rem;
    border-radius: 3px;
    display: flex;
    position: relative;
  }
  /*.red_left{*/
    /*width: .1rem;*/
    /*height: 1.8rem;*/

  /*}*/
  /*.yellow_left{*/
    /*width: .1rem;*/
    /*height: 1.8rem;*/
    /*background: #ffcc66;*/
    /*border-radius: 3px 0 0 3px;*/
  /*}*/
  /*.purple_left{*/
    /*width: .1rem;*/
    /*height: 1.8rem;*/
    /*background: #9D52DF;*/
    /*border-radius: 3px 0 0 3px;*/
  /*}*/
  .red_center{
    display: flex;
    align-items: center;
    margin-left: .1rem;
    width: 5.2rem;
  }
  .deal_title{
    font-size: .28rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .deal_time{
    font-size: .24rem;
    margin-top: .12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .deal_tex{
    text-align: left;
    margin-left: .11rem;
    width:4rem;
  }
  .deal_img{
    width: .82rem;
    height: .56rem;
  }
  .red_right{
    width: 1.3rem;
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid rgba(227,227,227,.5);
  }

</style>
